<template>
     <el-dialog title="站点费用配置" :data="visible" :visible.sync="visible" :show-close="false" width="500px" :modal="true" :close-on-click-modal="false" :close-on-press-escape="false">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
      
       <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        
        <el-form :model="propsData" ref="propsData" label-width="100px">
          <el-form-item label="选择营业点" prop="unit_id">
            <el-select v-if="iscreated==1" v-model="propsData.unit_id" placeholder="选择营业点"  style="width: 90%;">
                <el-option v-for="(item, index) in unitList" :key="index" :label="item.hotel_name" :value="item.id"></el-option>
            </el-select>
            <el-input v-else v-model="propsData.hotel_name" type="text" placeholder="选择营业点" style="width: 90%;" :disabled="true"></el-input>
          </el-form-item>

          <!-- <el-form-item label="负责人名称" prop="realname">
            <el-select v-model="propsData.admin_id" :placeholder="placeholders"  style="width: 90%;">
                <el-option v-for="item in adminList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="结算方式" prop="cash_type">
            <el-select v-model="propsData.cash_type" placeholder="选择一种结算方式"  style="width: 90%;">
                <el-option v-for="item in cashtypeOptions"  :key="item.id" :label="item.type_name"  :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算比例" prop="percent_num">
            <el-input-number v-model="propsData.percent_num" controls-position="right" :step="0.01" :min="0" :max="100" placeholder="请设置结算比例" style="width: 90%;"></el-input-number>
          </el-form-item>

          <el-form-item label="转账账号" prop="cash_account">
            <el-input v-model="propsData.cash_account" type="text" placeholder="请输入转账账号" style="width: 90%;" ></el-input>
          </el-form-item>
            <el-form-item label="转账账户名" prop="cash_name">
            <el-input v-model="propsData.cash_name" type="text" placeholder="请输入转账账户名" style="width: 90%;" ></el-input>
          </el-form-item>
          
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="loading"  @click="submitForm">保 存</el-button>
          </div>
      </el-dialog>
</template>

<script>
import * as api from '@/api/main-api' // API

export default {
  name: 'editUnitBillConfig',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object,
    iscreated: Number
  },

  data() {
    return {
      loading: false,
      cashtypeOptions: [ // 结算方式,1:每单百分比,2:每单可得金额
        { id: '1', type_name: '每单百分比' },
        { id: '2', type_name: '每单可得金额' }
      ],
      unitList: []
      // adminList: [],
      // placeholders: '选择该加盟商的负责人'
    }
  },

  methods: {
    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
      // this.adminList = []
    },

    // 表单提交
    submitForm() {
      this.loading = true
      // 数据赋值
      this.propsData.types = 2
      // 数据开始提交
      this.$refs.propsData.validate(valid => {
        if (valid) {
          this.postDataUrl(this.propsData)
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // 提交数据
    postDataUrl(data) {
      api.editbillconfigApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    },

    // 获取站点的列表
    getUnitList() {
      var postData = {
        islocal: 2,
        has_fund: 1 // 1:不显示,2:显示
      }
      api.selectOutleApi(postData).then(response => {
        if (response.data.code === 0) {
          this.unitList = response.data.data
        }
      })
    }

    // 选择用户负责人
    // remoteRealname(v) {
    // delete this.propsData.admin_id
    // this.getUserRealname(v)
    // }

    // 获取用户的数据
    // getUserRealname(val) {
    //   this.placeholders = '正在搜索效验中....'
    //   var postData = {
    //     unit_id: val,
    //     role_type: 4
    //   }
    //   api.adminSelectApi(postData).then(response => {
    //     if (response.data.code === 0) {
    //       this.placeholders = '选择该加盟商的负责人'
    //       if (response.data.data.length < 0) {
    //         this.placeholders = '未找到搜索的用户!!!'
    //         this.adminList = []
    //       }
    //       this.adminList = response.data.data
    //     }
    //   })
    // }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>